<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.3/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="static/css/reportlist.css">
</head>
<body>
<div id="app">
    <el-container>
        <el-main>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        fixed
                        prop="id"
                        label="报告编号"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="finding"
                        label="检查所见"
                        width="500">
                </el-table-column>
                <el-table-column
                        prop="status"
                        :formatter="handleStatus"
                        label="状态"
                        width="70">
                </el-table-column>
                <el-table-column
                        prop="update_time"
                        label="修改时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="comment"
                        label="评论"
                        width="200">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="80">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="cur_page_num"
                    :page-sizes="[10, 30, 50]"
                    :page-size="cur_page_size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-main>
    </el-container>
</div>
</body>

<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.15.3/lib/index.js"></script>
<script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
<script src="static/js/myapi.js"></script>
<script>
    new Vue({
        el: '#app',
        delimiters: ['{[', ']}'],
        data: {
            user_id: null,
            username: null,
            tableData: null,
            total: null,
            cur_page_size: 10,
            cur_page_num: 1
        },
        mounted() {
            this.username = sessionStorage.getItem('username')
            this.user_id = sessionStorage.getItem('user_id')
            this.findUserReportList(this.user_id, this.cur_page_size, this.cur_page_num)
        },
        methods: {
            handleStatus(row) {
                return row.status === 2 ? "已完成" : "未完成"
            },
            handleSizeChange(val) {
                this.cur_page_size = val
                this.findUserReportList(this.user_id, val, this.cur_page_num)
            },
            handleCurrentChange(val) {
                this.cur_page_num = val
                this.findUserReportList(this.user_id, this.cur_page_size, val)
            },
            handleClick(row) {
                sessionStorage.setItem('report_id', row.id)
                window.location.href = 'label.html'
            },
            findUserReportList(user_id, page_size, page_num) {
                axios.post('report/find_user_report_list', {
                    page_size: page_size,
                    page_num: page_num
                }, {headers: {'Authorization': 'Bearer ' + sessionStorage.getItem('access_token')}})
                    .then((response) => {
                        this.tableData = response.data.payload.data_list
                        this.total = response.data.payload.total
                    })
            }
        }
    })
</script>
</html>